<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监视重新实现计算案例</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>
        <div class="p">
            姓：<input type="text" v-model="firstName"><br/><br>
            名：<input type="text " v-model="lastName"><br><br>
            测试全名：<input type="text" v-model="fulName"><br><br>
        </div>
        <!--computed和watch:
        1.优先考虑计算属性，如果计算属性解决不了的异步问题，则交给侦听属性解决
        2.computed能完成的功能，watch必定可以完成
        3.所有被vue所管理的函数，最好写成普通函数，此时this会指向vm或者组件实例对象
        4.所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数等），最好写成箭头函数,这样this指向的才是vm或者是组件实例对象
        -->

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '.p',
                data() {
                    return {
                        firstName: '张',
                        lastName: '三',
                        fulName: '张-三'
                    }
                },
                watch: {
                    firstName(newValue) {
                        setTimeout(()=>{    //定时器所指定的回调函数的this指的是window，所以此时必须使用箭头函数
                            this.fulName = newValue + '-' + this.lastName;
                        },1000);
                    },
                    lastName(newValue) {
                        return this.fulName = this.firstName + '-' + newValue;

                    },
                }


            })
        </script>

    </body>
</html>